<template>
  <div >
    <!-- 首页搜索结构 类型1-->
    <div class="type1Container" v-if="$attrs.type == '1'">
      <router-link to="/home" class="logo"></router-link>
      <div class="search">
        <div class="divInput" @click="toSearch" > <van-icon name="search"  />搜索商品,挑选好物</div>
      </div>
      <router-link to="/login" class="login" v-show="isShowloginButton" >登录</router-link>
    </div>
    <!-- 分类搜索类型二 -->
    <div class="type2Container" v-else-if="$attrs.type == '2'">
       <div class="search">
          <div class="divInput" @click="toSearch" > <van-icon name="search"  />搜索商品,挑选好物</div>
       </div>
    </div>
    <!-- 搜索类型三 -->
    <div class="type3Container" v-else-if="$attrs.type == '3'">
      <router-link to="/home" class="home" style="color:#000">
        <van-icon name="wap-home-o" />
      </router-link>
      <div class="title">{{$attrs.title}}</div>
      <div class="searAndCart" >

        <van-icon @click="toSearch" name="search" />
        <van-icon @click="toCart" name="cart-o"  style="margin:0 10px;"/>
       
      </div>
    </div>


  </div>
</template>

<script>
  import {readToken}  from '@/utils/auth'
  export default {
    name:'Search',
    data() {
      return {
        isShowInput:false,   //搜索框显示与隐藏
        isShowloginButton:true   //是否显示首页的登录按钮
      }
    },
    mounted(){
     this.readToken()
    },
    methods:{
    // 跳转到搜索页面
      toSearch(){
        this.$router.push('/search')
        
      },
      // 点击跳转到购物车
      toCart(){
        this.$router.push('/cart')
      },
      // 看看本地是否有token
      readToken(){
        const token = readToken()
        if(token){
          this.isShowloginButton = false
        }else{
          this.isShowloginButton = true
        }
      }
   
    }
  }
</script>

<style lang="less" scoped>
 .type1Container{
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  height: 25px;
  line-height: 20px;
  padding:  10px;
  .logo{
    width: 70px;
    height: 25px;
    background-image: url('../../assets/images/sprite.png');
    background-size: 188px;
    background-repeat: no-repeat;
    background-position: -63px -123px;

 
  }
  .search{
    flex: 1;
    font-size: 15px;
    background-color: #eee;
    border-radius: 5px;
    margin: 0 15px;
    line-height: 25px;
    text-align: center;
    
    .divInput {
     
      margin-left: 5px;
      background-color: #eee;
      height: 25px;
      border: none;
      font-size: 14px;
    }
  }
  .login{
    width: 37px;
    height: 20px;
    border: 1px solid #dd1a21;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    line-height: 25px;
    color: #dd1a21;
  }
 }
 

//  type2Container
.type2Container{
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  height: 45px;
  line-height: 25px;
  text-align: center;
  // background: pink;
  .search{
    background-color: #eee;
    border-radius: 5px;
    .divInput{
      background-color: #eee;
      border-radius: 5px;
    }
  }
}
// type3Container
.type3Container{
  display: flex;
  justify-content:space-between;
  padding: 10px;
  height: 45px;
  box-sizing: border-box;
  line-height: 25px;
  .title{
    flex: 1;
    text-align: center;
    line-height: 25px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 3px;
  }
}
  
</style>